.sideMenuLayout {
  height: var(--custom-height, calc(100vh - 90px));
  overflow: hidden;
  position: relative;

  .sectionContainer {
    background: var( --color-bg);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
  }

  .sectionContext {
    height: 100%;
    overflow: auto;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
  }
}

.sideMenu {
  color: var(--color-components-side-nav-text);
  background: var( --color-bg);
  .introduction {
    background: var( --color-bg);
  }

  .nav {
    background: var( --color-bg);

    li {
      &:hover {
        background: var(--color-secondary);
      }

      &.active {
        color: var(--color-text-active);
        background: var(--color-primary-bg-active);
      }
    }
  }
}

.segmented {
  :global {
    .ant-segmented {
      background: transparent;
      color: var(--color-text-1);

      .ant-segmented-item {
        margin-right: 8px;
        padding: 3px 6px !important;
      }

      .ant-segmented-item-selected {
        color: var(--color-primary);
      }
    }
  }
}

.tagCheckable {
  background: var(--color-bg-1);
  color: var(--color-text-1);
}